<template>
<div id="parent">
  <div class="left" id="leftChart">
  </div>
  <div class="right">
    <div id="rc1"></div>
    <br>
    <div id="rc2"></div>
    <br>
    <div id="rc3"></div>
  </div>
  <div style="clear:both;"></div>
  <div id="bottomChart" style="width: 96%;height: 500px;margin:auto;margin-top: 30px;background-color: white;">

  </div>
</div>

</template>

<script>
import * as echarts from "echarts";

export default {
  name: "bloodSugar",
  mounted() {
    let leftChart = echarts.init(document.getElementById('leftChart'))
    const option = {
      title: {
        text: '各地区血糖异常情况',
        subtext: '根据最近一次的测数数据进行统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['高血糖人数', '低血糖人数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '成都', '总用户']
      },
      series: [
        {
          name: '高血糖人数',
          type: 'bar',
          data: [4434, 4032, 3755, 4766, 2567, 12432]
        },
        {
          name: '低血糖人数',
          type: 'bar',
          data: [2332, 3432, 2248, 3643, 1488, 9433]
        }
      ]
    };
    leftChart.setOption(option)
    let rc1 = echarts.init(document.getElementById('rc1'))
    const option1 = {
      title: {
        text: '各年龄段高血糖异常占比',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '10%',
        left: 'center'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            formatter: '{b}: {d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 1048, name: '<18'},
            {value: 735, name: '18-25'},
            {value: 580, name: '25-40'},
            {value: 484, name: '40-60'},
            {value: 300, name: '>60'}
          ]
        }
      ]
    };
    rc1.setOption(option1)
    let rc2 = echarts.init(document.getElementById('rc2'))
    const option2 = {
      title: {
        text: '各年龄段低血糖异常占比',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '10%',
        left: 'center'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            formatter: '{b}: {d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 1048, name: '<18'},
            {value: 735, name: '18-25'},
            {value: 580, name: '25-40'},
            {value: 484, name: '40-60'},
            {value: 300, name: '>60'}
          ]
        }
      ]
    };
    rc2.setOption(option2)
    let rc3 = echarts.init(document.getElementById('rc3'))
    const option3 = {
      title: {
        text: '血糖情况占比',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '10%',
        left: 'center'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            formatter: '{b}: {d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 1048, name: '正常'},
            {value: 735, name: '高血糖'},
            {value: 580, name: '低血糖'}
          ]
        }
      ]
    };
    rc3.setOption(option3)
    let bottomChart = echarts.init(document.getElementById('bottomChart'))
    const option4 = {
      title:{
        text:'近一年血糖异常情况'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        data: ['高血糖', '低血糖', '异常人数']
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '水量',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '高血糖',
          type: 'bar',
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
          name: '低血糖',
          type: 'bar',
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
          name: '异常人数',
          type: 'line',
          yAxisIndex: 1,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };
    bottomChart.setOption(option4)
  }
}

</script>

<style scoped>
#parent{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background-color: #F0F2F5;
  padding-top: 15px;
  box-sizing: border-box;
  height: 1800px;
}
.left{
  width: 48%;
  height: 1025px;
  background-color: white;
  float: left;
  margin-left: 15px;
}
.right{
  width: 48%;
  background-color: white;
  float: right;
  margin-right: 15px;
}
#rc1,#rc2,#rc3{
  width: 100%;
  height: 330px;
}
</style>
